<template>
  <el-row class="view">
    <el-col :span="18">
      <el-row>
        <el-card>
          <template #header>
            <div class="card-header">
              <span>客户资料 / <em>{{ OpportunityDetailForm.name }}</em></span>
            </div>
          </template>
          <el-form
            label-position="top"
            label-width="auto"
            :model="OpportunityDetailForm"
            :disabled="isView"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户姓名">
                  <el-input v-model="OpportunityDetailForm.name" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号码">
                  <el-input v-model="OpportunityDetailForm.phone" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职业">
                  <el-select v-model="OpportunityDetailForm.occupation" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in profession"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="学历">
                  <el-select v-model="OpportunityDetailForm.education" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in education"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所在地区">
                  <el-cascader v-model="area" :options="pcaTextArr" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信号码">
                  <el-input v-model="OpportunityDetailForm.weixin" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="年龄">
                  <el-input-number v-model="OpportunityDetailForm.age" :min="1" :max="999" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QQ">
                  <el-input v-model="OpportunityDetailForm.qq" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别">
                  <el-select v-model="OpportunityDetailForm.gender" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in gender"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="身高">
                  <el-input-number v-model="OpportunityDetailForm.height" :min="1" :max="999" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="体重">
                  <el-input-number v-model="OpportunityDetailForm.weight" :min="1" :max="999" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="备注">
                  <el-input v-model="OpportunityDetailForm.remark" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-row>
      <el-row>
        <el-card>
          <template #header>
            <div class="card-header">
              <span>客户意向</span>
            </div>
          </template>
          <el-form
            label-position="top"
            label-width="auto"
            :model="OpportunityDetailForm"
            :disabled="isView"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="意向分类">
                  <el-select v-model="OpportunityDetailForm.subject" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in intention"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="意向课程">
                  <el-select v-model="OpportunityDetailForm.courseId" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in courseData"
                      :key="item.courseId"
                      :label="item.name"
                      :value="item.courseId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="健身原因">
                  <el-input v-model="OpportunityDetailForm.reason" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="每周健身时间">
                  <el-input-number v-model="OpportunityDetailForm.hours" :min="1" :max="999" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="意向金额">
                  <el-input-number v-model="OpportunityDetailForm.money" :min="1" :max="999" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="其他意向">
                  <el-input v-model="OpportunityDetailForm.othenIntention" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-row>
      <el-row>
        <el-card>
          <template #header>
            <div class="card-header">
              <span>沟通记录</span>
            </div>
          </template>
          <el-form
            label-position="top"
            label-width="auto"
            :model="OpportunityDetailForm"
            :disabled="isView"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="跟进状态">
                  <el-select v-model="OpportunityDetailForm.status" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in followStatus"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="下次跟进时间">
                  <el-date-picker
                    v-model="OpportunityDetailForm.nextTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="沟通重点">
                  <el-select v-model="title" placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in communication"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="沟通纪要">
                  <el-input v-model="context" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row>
            <el-col :span="10" :offset="14">
              <el-button @click="handleBack">返回</el-button>
              <el-button :disabled="isView" type="primary" @click="handleSubmit">保存</el-button>
              <el-button :disabled="isView" type="success" @click="handleBack">转为成交客户</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-row>
        <el-card class="right">
          <template #header>
            <div class="card-header">
              <span>商机跟进记录</span>
            </div>
          </template>
          <div class="context" v-for="item in inFo" :key="item.assignId">
            <h2> {{ item.info }}</h2>
            <p>{{ item.createTime }}</p>
          </div>
        </el-card>
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {
  getBusinessFollow,
  getCommunication,
  getCourseByType,
  getEducation, getFollowStatus,
  getGender,
  getIntention,
  getOpportunity,
  getProfession, saveBusiness
} from '@/api/business/business';
import { useRoute, useRouter } from 'vue-router';
import { onMounted, reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { pcaTextArr } from 'element-china-area-data';
import Cookies from 'js-cookie';

const route = useRoute();
const router = useRouter();

const OpportunityDetailForm = ref({
  activityId: null,
  address: [],
  age: null,
  businessId: null,
  channelId: null,
  clueId: null,
  courseId: null,
  createBy: '',
  createTime: '',
  delFlag: 0,
  education: '',
  endTime: null,
  failCount: 0,
  gender: null,
  height: null,
  hours: null,
  info: '',
  level: null,
  money: null,
  name: '',
  nextTime: '',
  occupation: null,
  othenIntention: null,
  phone: '',
  qq: '',
  reason: null,
  record1: '',
  record2: '',
  remark: null,
  status: 1,
  subject: null,
  transfer: false,
  updateBy: null,
  updateTime: null,
  weight: null,
  weixin: ''
});

// 获取详细列表
const getOpportunityDetail = (id: any) => {
  getOpportunity(id).then((res: any) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    OpportunityDetailForm.value = res.data;
  });
};
// 性别
const gender = ref([]);
const getGenderData = () => {
  getGender().then(res => {
    gender.value = res.data;
  });
};
// 学历
const education = ref([]);
const getEducationData = () => {
  getEducation().then((res) => {
    education.value = res.data;
  });
};
// 职业
const profession = ref([]);
const getProfessionData = () => {
  getProfession().then((res) => {
    profession.value = res.data;
  });
};
// 地区
const area = ref([]);
watch(() => area.value, (newVal) => {
  OpportunityDetailForm.value.province = newVal[0];
  OpportunityDetailForm.value.city = newVal[1];
  OpportunityDetailForm.value.area = newVal[2];
});
// 意向分类
const intention = ref([]);
const getIntentionData = () => {
  getIntention().then(res => {
    intention.value = res.data;
  });
};
const courseData = ref([]);
watch(() => OpportunityDetailForm.value.subject, (newVal) => {
  getCourseByTypData(newVal);
});
const getCourseByTypData = (dictValue: any) => {
  getCourseByType(dictValue).then(res => {
    console.log(res);
    courseData.value = res.data;
  });
};

// 跟进状态
const followStatus = ref([]);
const getFollowStatusData = () => {
  getFollowStatus().then(res => {
    console.log(res);
    followStatus.value = res.data;
  });
};

// 沟通重点
const communication = ref([]);
const getCommunicationData = () => {
  getCommunication().then(res => {
    console.log(res);
    communication.value = res.data;
  });
};
let context = ref([]);
let title = ref('');
watch(() => title.value, (newVal) => {
  OpportunityDetailForm.value.info = `【${newVal}】${context.value}`;
});
watch(() => context.value, (newVal) => {
  OpportunityDetailForm.value.info = `【${title.value}】${newVal}`;
});
// 保存
const handleSubmit = () => {
  saveBusiness(OpportunityDetailForm.value).then((res: any) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    ElMessage.success('保存成功');
    router.push({ path: '/business' });
  });
};
let inFo = ref('');
const getBusinessFollowData = (id: any) => {
  getBusinessFollow(id).then((res: any) => {
    console.log(res);
    inFo.value = res.data;
  });
};
// 返回
const handleBack = () => {
  router.go(-1);
};

// 判断是查看还是跟进
const isView = ref(true);

const handleView = (isFollow: any) => {
  console.log(isFollow);
  if (isFollow === 'false') {
    isView.value = true;
  }
  if (isFollow === 'true') {
    isView.value = false;
  }
};


onMounted(() => {
  getOpportunityDetail(route.query.id);
  getBusinessFollowData(route.query.id);
  getGenderData();
  getEducationData();
  getProfessionData();
  getIntentionData();
  getFollowStatusData();
  getCommunicationData();
  handleView(route.query.isFollow);
});

</script>

<style scoped lang="scss">
.view {
  padding: 10px;

  .el-row {

    .el-card {
      width: 100%;
      margin-bottom: 20px;

      .card-header {
        em {
          font-style: normal;
          font-size: 14px;
        }

      }

    }

    .right {
      margin-left: 10px;
    }
  }
}

.el-form {
  .el-col {
    padding: 0 5px;
  }
}

.context {
  margin-bottom: 10px;

  h2 {
    font-style: italic;
    font-weight: bold;
  }

  p {
    font-size: 12px;
    color: #999;
  }
}

</style>
